<template>
  <div>
    <Header :title="'详情'" :backStep="'-1'"></Header>
    <div class="formBox">
      <div class="formTitle">作业票详情</div>
      <div class="formItem">
        <van-cell title="作业票编号:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <van-cell title="作业内容:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <van-cell title="作业地点:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
      </div>

      <div class="formItem">
        <van-cell title="开始时间:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <van-cell title="结束时间:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
      </div>
      <div class="formItem">
        <van-cell title="作业单位:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <van-cell title="作业负责人:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <van-cell title="作业监护人:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <van-cell title="措施制定人:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <van-cell title="安全交底人:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
      </div>
      <div class="formItem">
        <van-cell title="有限空间名称:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <van-cell title="原有介质名称:">
          <template #default>
            <div>2222</div>
          </template>
        </van-cell>
        <!-- <div class="cellCss">
          <div class="cellCssTitle">关联作业票:</div>
          <div>
            <van-uploader
              v-model="uploader1"
              :max-count="3"
              disabled
              :show-upload="false"
              :deletable="false"
            />
          </div>
        </div> -->
        <div class="cellCss">
          <div class="cellCssTitle">关联图片:</div>
          <div>
            <van-uploader
              v-model="uploader1"
              :max-count="3"
              disabled
              :show-upload="false"
              :deletable="false"
            />
          </div>
        </div>
      </div>
      <div class="formTitle">审核信息</div>
      <div>
        <van-cell title="审批人:">
          <template #default> 222 </template>
        </van-cell>
        <van-cell title="审核意见:">
          <template #default>
            <div style="color: #25bf95">222</div>
          </template>
        </van-cell>
        <van-cell title="留言:">
          <template #default> 222 </template>
        </van-cell>
      </div>
      <div class="formItem">
        <van-cell title="审核状态:">
          <template #default> 222 </template>
        </van-cell>
        <van-cell title="审核意见:">
          <template #default>
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1">通过</van-radio>
              <van-radio name="2">未通过</van-radio>
            </van-radio-group>
          </template>
        </van-cell>
        <van-cell title="留言:">
          <template #default>
            <input type="text" class="inputCss" placeholder="请输入留言" />
          </template>
        </van-cell>
      </div>
    </div>

    <van-goods-action>
      <van-goods-action-button
        :style="{
          background: 'linear-gradient(270deg, #006BFF 0%, #458CFF 100%)',
        }"
        type="danger"
        text="点击开锁"
        @click="onClickButton"
      />
    </van-goods-action>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
export default {
  name: 'homeWorkDetail',
  props: {},
  components: {
    Header,
  },
  data() {
    return {
      uploader1: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      uploader2: [{ url: 'https://img01.yzcdn.cn/vant/leaf.jpg' }],
      radio: '1',
    }
  },
  methods: {
    onClickButton() {
      this.$router.push('/successSubmit')
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.formBox {
  padding: 16px;
  background: #f7f7f7;
  padding-bottom: 60px;
  .formTitle {
    font-weight: bold;
    font-size: 16px;
    color: #2f3133;
    margin-bottom: 16px;
  }
  .formItem {
    border-radius: 10px; /* 设置圆角大小 */
    overflow: hidden; /* 隐藏超出部分 */
    background-color: #fff; /* 可选：设置背景颜色 */
    margin-bottom: 12px;
    .inputCss {
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
      text-align: right; /* 添加这行代码 */
    }
    .cellCss {
      box-sizing: border-box;
      width: 100%;
      padding: 10px 16px;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      .cellCssTitle {
        margin-bottom: 10px;
      }
    }
  }
}

.van-cell {
  align-items: center;
  ::v-deep .van-field__label {
    color: #323233 !important ;
  }
}
.van-cell__value {
  overflow: visible;
}
</style>
